<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="liao">
    <div class="wen-top">
      <router-link to="ConsultationList">
        <img src="../assets/images/fanhui.png" alt="" class="fanhui" />
      </router-link>  
      <router-link to="/mylist">
         <h3>Défilé</h3>
      </router-link>
      <img src="../assets/images/geng.png" alt="" class="geng" />
    </div>
    <div class="hengxian"></div>
    <div>
      <div class="koa"></div>
      <van-sticky :offset-bottom="10" position="bottom">
        <div class="dibu">
          <img src="../assets/images/yuyin.png" alt="" class="yuyin" />
          <input class="shu" v-model="val" />
          <button
            class="song"
            style="float: left; height: 35px"
            @click="fa"
            type="primary"
          >
            发送
          </button>
          <img src="../assets/images/xiao.png" alt="" class="xiao" />
          <img src="../assets/images/xiang.png" alt="" class="xiang" />
        </div>
      </van-sticky>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref } from "vue";

// 创建一个响应式数据 'val'，初始值为空字符串
const val = ref("");

// 创建一个 WebSocket 连接，连接到本地的 8090 端口
let ws = new WebSocket("http://localhost:8090");

// 定义一个函数，用于发送消息和在页面上创建并添加一个包含消息和图片的元素
const fa = () => {
  // 通过 WebSocket 发送 'val' 的值
  ws.send(val.value);
  // 创建一个新的 'DIV' 元素
  let p = document.createElement("DIV");
  // 设置 'DIV' 元素的内部 HTML 结构，包含一个段落和一张图片
  p.innerHTML = `
    <p style='margin: 30px 40px;
    padding: 10px 10px;
    border: 1px solid #000;
    border-radius: 15px;
    '>${val.value}</p>
    <img
      src="https://ts1.cn.mm.bing.net/th?id=OIP-C.qCys2C8LjF8c3_UHbGOooAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
      alt=""
      style="width: 50px;height: 50px; border-radius: 30px; position: absolute;
  right: 15px;"
    />
    `;
  p.style.display = "flex";
  p.style.margin = "12px 0";
  p.style.width = "90vw";
  p.style.justifyContent = "flex-end";

  // 查找页面中类名为 '.koa' 的元素
  const koaElement = document.querySelector(".koa");
  // 判断如果找到该元素
  if (koaElement) {
    // 将创建的 'DIV' 元素添加到该元素内部
    koaElement.appendChild(p);
  } else {
    // 如果未找到，在控制台输出错误信息
    console.error("找不到.koa 元素");
  }
};
// 当 WebSocket 接收到消息时执行的回调函数
ws.onmessage = (e) => {
  // 设置一个定时器，延迟 300 毫秒执行后续操作
  setTimeout(() => {
    let p = document.createElement("DIV");
    // 设置 'DIV' 元素的内部 HTML 结构，包含一张图片和一个段落
    p.innerHTML = `
  <img
      src='https://ts4.cn.mm.bing.net/th?id=OIP-C.PobTVuzuQy7tAZtvVEc3VQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
      alt=""
      style="width: 50px;height: 50px;position: absolute;
    left: 15px;"
    />
    <p style='margin: 5px 40px;
    padding: 10px 10px;
    border: 1px solid red;border-radius: 15px;
    position: absolute;
    left: 35px;
    '>${e.data}</p>
    `;
    // 设置 'DIV' 元素的样式，包括显示方式、宽度和内容对齐方式等
    p.style.display = "flex";
    p.style.width = "90vw";
    p.style.height = "10px";
    p.style.justifyContent = "flex-start";
    // 在控制台输出创建的 'DIV' 元素（用于调试）
    console.log(p);
    // 查找页面中类名为 '.koa' 的元素
    const koaElement = document.querySelector(".koa");
    // 判断如果找到该元素
    if (koaElement) {
      // 将创建的 'DIV' 元素添加到该元素内部
      koaElement.appendChild(p);
    } else {
      // 如果未找到，在控制台输出错误信息
      console.error("找不到.koa 元素");
    }
  }, 300);
};
</script>

<style scoped lang="scss">
.liao {
  width: 120%;
  height: 80vh;
  border: solid 1px #fefefe;
  margin-left: -30px;
  margin-top: -20px;
  position: relative;
  .wen-top {
    width: 100%;
    height: 60px;
    position: absolute;
    top: -10px;
    .fanhui {
      width: 25px;
      height: 25px;
      margin: 12px 20px;
    }

    h3 {
      position: absolute;
      top: 10px;
      left: 165px;
      font-weight: 600;
    }

    .cha {
      position: absolute;
      right: 10px;
      top: 7px;
      font-weight: 600;
      font-size: 14.2px;
    }

    .tixian {
      width: 372x;
      height: 10px;
      background-color: #f6f2f2;
    }
    .geng {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
  .hengxian {
    width: 377px;
    height: 10px;
    background-color: #eae4e4;
    position: absolute;
    top: 40px;
    left: -5px;
  }

  .koa {
    width: 100%;
    margin-top: 50px;
    // border: solid 1px #000;
  }

  .dibu {
    width: 371px;
    height: 50px;
    position: fixed;
    bottom: 0px;
    left: -1px;

    background-color: #e4e7e8;

    .yuyin {
      width: 30px;
      height: 30px;
      position: absolute;
      left: 5px;
      top: 10px;
    }

    .shu {
      width: 200px;
      height: 30px;
      position: absolute;
      left: 40px;
      top: 10px;
      border: solid 1px #000;
      // background-color: white;
      border: none;
      border-radius: 10px;
      outline: none;
    }

    .song {
      position: absolute;
      right: 70px;
      top: 7px;
      width: 50px;
      height: 30px;
      background-color: rgb(25, 224, 25);
      color: white;
      border: none;
      border-radius: 10px;
    }

    .xiao {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 35px;
      top: 10px;
    }

    .xiang {
      width: 25px;
      height: 25px;
      position: absolute;
      right: 5px;
      top: 13px;
    }
  }

  .dv {
    display: flex;
    width: 100vw;
    // justify-content: center;
    align-items: center;

    .img {
      width: 50px;
      height: 50px;
    }

    .p {
      margin: 0 40px;
      // padding: 10px 40px;
      border: 1px solid red;
      border-radius: 15px;
    }
  }
}
</style>
